<template>
  <div>
    <button @click="increment">
      Count is: {{ count }}, double is {{ doubbleCount }}, click to increment.
    </button>
    <h2>响应式对象</h2>
    <button @click="objIncrease">对象增加值</button>
    <p>响应式对象的值{{state.count}}</p>
  </div>
</template>



<script>
import { ref, computed, onMounted, reactive } from "vue";
// 使用 ref 创建响应性引用，
// 用 computed 建立计算属性，
// 用 onMounted 访问安装的生命周期 hook

function useCount() {
  const state = reactive({ count: 0 });
  const objIncrease = () => {
    state.count++;
  };
  const reset = () => {
    state.count = 0;
  };
  return { state, objIncrease, reset };
}

export default {
  setup() {
    const count = ref(0);
    const countOps = useCount();

    const doubbleCount = computed(() => count.value * 2);
    function increment() {
      count.value++;
    }

    onMounted(() => {
      console.log("组件 mounted");
    });

    // 暴露给模板
    return {
      count,
      doubbleCount,
      increment,
      ...countOps
    };
  },
  mounted() {
    console.log(333);
  }
};
</script>